<template>
  <div class="weituo h100">
    <header>
        <a @click="back">
            <van-icon name="arrow-left" size="0.32rem" color="#999999"/>
        </a>
        <span>我要打官司</span>
    </header>
    <div class="list">
        <p><span>委托人姓名</span><input type="text" placeholder="请填写真实姓名"></p>
        <p>
          <span>性别</span>
          <b class="right">
            <input type="radio" name="sex" checked><span>男</span>
            <input type="radio" name="sex"><span>女</span>
          </b>
        </p>
        <p><span>联系电话</span><input type="text"></p>
        <van-cell is-link @click="showPopup">案件类型</van-cell>
    <van-popup v-model="show">
      <h3>选择类型</h3>
      <div class="type">
        <button @click="hidden" v-for="(item,index) in type" :key="index">{{item.problemStyle}}</button>
      </div>
      </van-popup>
    </div>
    <h5>案件基本情况</h5>
    <p class="tishi">提示内容：1、事情发生在什么时候；2、事情的大概经过怎么样；3、您这边有没有相关的证据提供</p>
    <textarea name="" id="" cols="30" rows="10" placeholder="请输入案件基本情况"></textarea>
    <button @click="btn" class="btn">确认委托律师</button>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      show: false,
    }
  },
  created() {
    this.gettype();
  },
  computed: {
    ...mapState("ke", ["type"]),
  },
  methods:{
    back() {
        // 返回
        this.$router.push("/home/index")
      },
       showPopup() {
      this.show = true;
    },
    hidden(){
      this.show = false;
      this.$toast('类型选择成功');
    },
    btn(){
      this.$toast('发布成功');
      location.reload();
    },
    ...mapActions("ke", ["gettype"]),
  },
}
</script>

<style scoped>
    .weituo{
      padding: 0 .4rem;
    }
    header{
      display: flex;
      justify-content: space-around;
      margin:.4rem 0;
    }
    header span{
      flex: 1;
      text-align: center;
    }
    .list {
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
    .list p{
      width: 100%;
      height: .8rem;
    }
    .list p span{
      font-size: .32rem;
    }
    .list p input{
      float:right;
      border:none;
      width: 2.4rem;
    }
    .list p .right{
      float: right;
    }
    .list p .right input{
      width: .4rem;
      height: .4rem;
      float: none;
      font-size: .25rem;
    }
    .list p b{
      float: right;
      font-weight: normal;
      font-size: .25rem;
    }
    .list p b button{
      margin-left: .1rem;
      border: none;
      background-color: #fff;
    }
    .tishi{
      font-size: .23rem;
    }
    textarea{
      width: 98%;
      padding: .2rem;
    }
    .btn{
      position: absolute;
      bottom: .5rem;
      left: .2rem;
      width: 95%;
      height: .8rem;
      background-color: yellow;
      color: white;
      text-align: center;
      line-height: .2rem;
      border: none;
      border-radius:5%;
    }
    .type {
      display: flex;
      flex-wrap: wrap;
    }
    h3{
      font-size: .25rem;
      margin: .1rem;
    }
    .type button{
      margin:.05rem ;
      font-size: .25rem;
    }
</style>